<template>
  <div id="app" class="app">
    <router-view/>
  </div>
</template>

<script>
import Hammer from 'hammerjs'
import Watermark from '@/assets/js/Watermark2'
export default {
  name: 'App',
  methods: {
    renderWatermark () {
      new Watermark(document.querySelector('body'), {
        watermark: 'defore 2018-08-03 20:05:30',
        fontSize: '16px',
        fontColor: 'rgba(5, 201, 17, .1)'
      })
    }
  },
  mounted () {
    this.renderWatermark()
  }
}
</script>
<style lang="less">
#repeat-watermark{
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  background: #fff;
}
@import './assets/less/default.less';
.color-red {
  color: @red!important;
}
.color-green {
  color: @green!important;
}
.color-blue {
  color: @blue!important;
}
.filter-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: .25rem;
  margin-top: .2rem;
  .iconfont {
    font-size: .25rem;
    line-height: .3rem;
  }
}
.more-btn {
  margin-top: .12rem;
  .iconfont {
    font-size: .5rem;
  }
}
.component {
  padding-top: 1.2rem;
}
.need-footer {
  padding-bottom: 1rem;
}
.display-flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.flex8 {
  flex: 8;
}
.flex16 {
  flex: 16;
}
.clearfix {
  &:before,
  &:after {
    display: table;
    content: '';
  }
  &:after {
    clear: both;
  }
}
.option-list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .option-item {
    width: 90%;
    font-size: .3rem;
    line-height: .8rem;
    text-align: center;
    margin-bottom: .3rem;
    border: 1px solid @blue;
    color: @blue;
    background-color: lighten(@blue, 40%);
    border-radius: 5px;
    &.btn-red {
      border: 1px solid @red;
      color: @white;
      background-color: @red;
    }
  }
}
.expand-enter-active, .expand-leave-active {
  transition: transform .2s ease-in;
}
.expand-enter, .expand-leave-to {
  transform: translateX(100%);
}
.expand2-enter-active, .expand2-leave-active {
  transition: opacity .2s ease-in;
}
.expand2-enter, .expand2-leave-to {
  opacity: 0;
}
.section {
  width: 90%;
  margin: auto;
  margin-bottom: .3rem;
  font-size: .25rem;
  border: 1px solid #ebeef5;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  .section-title {
    font-size: .25rem;
    color: #000;
    padding: .15rem;
    border-bottom: 1px solid #ebeef5;
    .section-icon {
      font-size: .25rem;
      color: @blue;
      margin-right: .15rem;
    }
  }
  .section-body {
    padding: .15rem;
  }
}
</style>
